<template>
	<view class="content">
		<liu-waterfall :dataList="data" :column="columns" @click="click"></liu-waterfall>
		<!-- <view class="infoBox" v-if="isInfo">
			<image src="/static/test.png" mode="widthFix" class="info"></image>
			<image :src="baseUrl+'img/index/back1.png'" class="back"></image>
		</view> -->
	</view>
</template>
<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				baseUrl: this.$baseUrl,
				data: [],
				columns: 2,
				// isInfo: false
			}
		},
		methods: {
			// 精彩瞬间
			// back(){
			// 	this.isInfo=false;
			// },
			getData() {
				this.$request.get('overimg_list').then(res => {
					this.data = res.data.data;
				})
			},
			click(e) {
				console.log('点击内容', e)
				console.log(e.path);
				// this.isInfo=true;
				let arr = [];
				arr.push(e.path)
				uni.previewImage({
					loop: true,
					urls: arr, //可以展示imgUrl 列表中所有的图片
				});
			},
		},
		computed: {
			...mapState(['token']),
		},
		onLoad() {
			if (this.token) {
				this.getData();
			} else {
				this.$store.watch(
					(state) => state.token,
					(newToken) => {
						if (newToken) {
							this.getData();
						}
					}
				);
			}
		},
	}
</script>
<style lang="scss" scoped>
	.infoBox {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		z-index: 10;
		background-color: rgba(0, 0, 0, 0.6);

		.back {
			position: absolute;
			right: 5%;
			top: 5%;
			width: 62rpx;
			height: 62rpx;
		}

		.info {
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			width: 100%;
			height: auto;
		}
	}

	.content {
		width: 100%;
		height: 100vh;
		padding-left: 30rpx;
	}
</style>